/* 
思路：
1、获取元素
2、左右按钮的鼠标进入隐藏，离开显示
3、左右按钮添加点击事件，图片移动变换
4、生成小圆点，给小圆点添加点击事件，图片与小圆点一起变化
5、图片不经过轮播图，轮播图会自动播放，经过时停止播放
*/

window.addEventListener('load', function(){
    // 1、获取元素
    var arrow_l = this.document.querySelector('.arrow-l');
    var arrow_r = this.document.querySelector('.arrow-r');
    var focus = this.document.querySelector('.focus');
    var ul = this.document.querySelector('ul');

    // 2、鼠标进入，按钮隐藏、离开按钮显示
    focus.addEventListener('mouseenter', function(){
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // 鼠标经过轮播图，自动播放停止
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function(){
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        // 鼠标离开时，自动播放开始
        timer = setInterval(function(){
            arrow_r.click();
        },2000)
    })


    // 3、动态生成小圆点 有几张图片就生成几个小圆点
    var ol = focus.querySelector('.circle');
    for(var i = 0; i < ul.children.length; i++){
        // 创建一个li
        var li = document.createElement('li');
        li.setAttribute('index',i);
        // 把li插入到ol中
        ol.appendChild(li);
        // 小圆点添加点击事件
        li.addEventListener('click', function(){
            // 清空所有小圆点样式
            for(var j = 0; j < ol.children.length; j++){
                ol.children[j].className = '';
            }
            // 当前点击对象添加样式
            this.className = 'current';

            // 点击小圆点，移动图片，即ul移动
            var ind = this.getAttribute('index');
            // 把 li的索引赋给circle
            circle = ind;
            animate(ul, -ind * focusWidth);
            
        })
    }

    // 默认选中第一个小圆点
    ol.children[0].className = 'current';
    
    

    // 4、按钮点击切图
    var num = 0;    //统计点击的次数
    var focusWidth = focus.offsetWidth;     // 获取focus的实际宽度

    // 控制小圆点的播放
    var circle = 0;
    // 控制小圆点的样式
    function circleChange(){
        // 排他思想
        for(var i = 0; i < ol.children.length; i++){
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }

    

    // 复制第一张图放在ul最后，复制最后一张图放在ul最前面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    var flag = true;
    // 右侧按钮点击
    arrow_r.addEventListener('click', function(){
        if(flag){
            flag = false;   // 关闭节流阀

            // 如果走到了最后一张图片，我们的ul要快速复原到最初的位置
            // num == 4时，此时展示的是克隆过来的第五张
            if(num === ul.children.length - 1){  // 克隆第一张图到末尾后 li有5个
                ul.style.left = 0;
                num = 0;
            }
            // 执行完if 马上回到第一张，然后又立马num++,执行动画跳到第二张，即跳过第一张。
            num++;       
            // 移动的距离等于 ，点击的次数num * focusWidth
            animate(ul,-num * focusWidth, function(){
                // 动画没执行完 不执行flag = true 点击右侧按钮，if不成立 就没什么可执行
                flag = true;
            })

            // 点击右侧按钮 小圆点要一起变化
            circle++;
            if(circle == ol.children.length){
                circle = 0;
            }
            circleChange()
        }
    })
    // 左侧按钮点击
    arrow_l.addEventListener('click', function(){
        if(flag){
            flag = false;
            if(num == 0){
            
                num = ul.children.length-1;
                ul.style.left = -num * focusWidth + 'px' ;
            }
            num--;
            // 移动的距离等于 ，点击的次数num * focusWidth
            animate(ul,-num * focusWidth, function(){
                flag = true;
            })
    
            circle--;
            circle = circle < 0 ? ol.children.length - 1 : circle;
            circleChange()
        }
    })

    // 自动播放轮播图
    var timer = this.setInterval(function(){
        arrow_r.click();

    }, 2000)

})